<template>
	<div class="banner">
		<!-- 隐藏菜单 -->
		<div :class="[{'default':show},'slider']">
			<p>
				<router-link to="/">登录</router-link>/<router-link to="/">注册</router-link>

			</p>
			<form class="search">
				<i class="iconfont">&#xe687;</i>
				<input type="text" placeholder="泰国" />
			</form>
			<ul>
				<li v-for="item in menus" :key="item.id">
					<router-link :to="item.url">{{item.name}}</router-link>
				</li>

			</ul>
		</div>
		<!-- 主页面 -->
		<div class="main">
			<!-- 顶部 -->
			<div class="banner-top">
				<div class="city">
					<router-link to="/city">
						<label>{{cityName}}</label>
						<i class="iconfont">&#xe626;</i>
					</router-link>
				</div>
				<form class="search">
					<i class="iconfont">&#xe687;</i>
					<input type="text" placeholder="泰国" />
				</form>
				<!-- 导航按钮 -->
				<p class="slider-btn" @click="getShow()">
					<i class="iconfont">&#xeb71;</i>
				</p>
			</div>

			<!-- 轮播区域 -->
			<div class="swiper banner-swiper">
				<!-- 主体滑动区 -->
				<ul class="swiper-wrapper">

					<li class="swiper-slide" v-for="item in imgURL" :key="item.id">
						<img :src="item.imgURL" />
					</li>

				</ul>

				<div class="swiper-pagination"></div>

			</div>
		</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex';
	import {
		onMounted
	} from 'vue';

	//引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';

	//3.swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);

	export default {
		name: 'Banner',
		props: ['propsbanner'],
		data() {
			return {

				menus: [],
				show: false,

				imgURL: [{
						id: 1,
						imgURL: require('@/assets/img/1.jpg')
					},
					{
						id: 2,
						imgURL: require('@/assets/img/2.jpg')
					},
					{
						id: 3,
						imgURL: require('@/assets/img/3.jpg')
					},
					{
						id: 4,
						imgURL: require('@/assets/img/4.jpg')
					},
				]
			}

		},
		
		computed:{
					//接受state内部的cityNmae变量
					...mapState(['cityName']),
				},


		watch: {
			propsbanner() {
				this.menus = this.propsbanner;
			}
		},
		methods: {
			getShow() {
				this.show = !this.show;
			}
		},



		setup() {
			onMounted(() => {
				new Swiper('.banner-swiper', {
					//循环播放
					loop: true,
					//设置分页器效果,具体做挂在区域	
					pagination: {
						el: '.swiper-pagination'
					},
					autoplay: {
						delay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction: false
					}
				})
			})
		}
	}
</script>

<style>
	.slider {
		position: absolute;
		left: -6.6rem;
		top: 0;
		z-index: 6;
		background-color: rgba(62, 62, 62, 0.9);
		height: 100%;
		width: 6.6rem;
		transition: all 1s;
	}

	/* 动画选择器 */
	.default {
		left: 0;
		transition: all 1s;
	}

	.slider a {
		text-decoration: none;
		color: white;
		padding-right: 0.1rem;
	}

	.slider p {
		line-height: 1.3rem;
		text-align: right;
		padding-right: 0.3rem;
		color: white;
		font-size: 0.35rem;
	}

	.slider .search {
		background-color: #3a3a3a;
		border-radius: 0.1rem;
		overflow: hidden;
		line-height: 0.8rem;
		width: 90%;
		margin: 0.3rem auto;
	}

	.slider .search i {
		display: inline-block;
		height: 100%;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
		color: white;
	}

	.slider .search input {
		background-color: #3a3a3a;
		border: none;
		width: 80%;
		line-height: 0.8rem;
		text-indent: 1em;
		color: white;
		outline: none;
	}

	.slider ul {
		margin: 0.5rem auto 0;
		width: 95%;
	}

	.slider ul li {
		line-height: 1.3rem;
		text-align: left;
		text-indent: 1em;
		font-size: 0.32rem;
		border-top: 0.04rem solid black;
	}

	.slider ul li a {
		display: block;
	}

	.slider ul li:last-child {
		border-bottom: 0.04rem solid black;
	}

	.main {
		position: relative;
		width: 100%;
		height: 5.6rem;
	}

	/* 顶部样式 */
	.banner-top {
		position: absolute;
		left: 0;
		top: 0.3rem;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 0.8rem;

	}

	.banner-top city {
		color: white;
		font-size: 0.35rem;
		line-height: 0.8rem;
		padding-left: 0.3rem;
		padding-right: 0.4rem;

	}

	.banner-top .city i {
		vertical-align: middle;
		padding-left: 0.1rem;
	}

	.banner-top .search {
		flex: 1;
		background-color: white;
		border-radius: 0.1rem;
		overflow: hidden;
		line-height: 0.8rem;
	}

	.banner-top .search i {
		display: inline-block;
		height: 100%;
		font-size: 0.45rem;
		padding-left: 0.2rem;
		vertical-align: middle;
	}

	.banner-top .search input {
		border: none;
		width: 80%;
		line-height: 0.8rem;
		text-indent: 1em;
		border-radius: 7px;
		outline: none;
	}

	.banner-top .slider-btn {
		color: white;
		padding-left: 0.4rem;
		padding-right: 0.3rem;
		line-height: 0.8rem;
		vertical-align: middle;
	}

	/* 轮播区域的样式 */
	.banner-swiper {
		width: 100%;
		height: 5.6rem;
	}

	.banner-swiper img {
		width: 100%;
		height: 100%;
	}

	/* 穿透 */
	.swiper-pagination>>>.swiper-pagination-bullet-active {
		background-color: #ffdd40;
	}
</style>
